<template>
	<view class='issue'>
		<view class="issue-head">
			<slot name="headPic"></slot>
			<image v-if="headPicShow" :src="headPicValue" class="issue-head-pic" mode=""></image>
			<text v-if="headTitleShow" class="issue-head-title">{{headTitleValue.slice(0,5)}}</text>
			<view class="issue-head-star-box" v-if="starsShow">
				<image v-for="(item,index) in starsMax" :key="index" :src="(index+1)>formatScore?starDefault:starActive"
					:class="formatScore==index+1?'active':''" mode="" @click="setScore(index+1)"></image>
			</view>
			<text class="issue-head-text">{{scoreText}}</text>
		</view>
		<textarea v-if="textareaShow" @blur="blur" :value="infoReceive.content" :placeholder="textareaPlaceholder" />
		<view class="index-page">
			<sunui-upimg :upload_cache_list.sync="upload_cache_list" :upload_auto="true" ref="upimg2"
				:upimg_preview="serviceArr2" :upload_count="4"></sunui-upimg>
			<!-- 可能有的时候只是从服务器获取图片，禁用删除图片! -->
		</view>
		<view class="issue-btn-box">
			<button v-if="submitShow" class="submit-btn" type="primary" @click="doSubmit">{{submitText}}</button>
			<slot name="submit"></slot>
		</view>
	</view>
</template>
<script>
	import sunUiUpimg from '@/components/sunui-upimg/sunui-upimg.vue';
	export default {
		data() {
			return {
				iscore: 0,
				scoreText: '',
				serviceArr2: [],
				goodsId: '',
				orderId: '',
				type: '',
				upload_cache_list: []
			}
		},
		components: {
			'sunui-upimg': sunUiUpimg
		},
		props: {
			headPicShow: { //图片
				type: [String, Boolean],
				default: true,
			},
			headPicValue: {
				type: String,
				default: require('@/static/img/st_pic.png')
			},

			headTitleShow: { //标题
				type: [String, Boolean],
				default: true,
			},
			headTitleValue: {
				type: String,
				default: "描述相符"
			},

			starsShow: {
				type: [String, Boolean],
				default: true,
			},
			starsMax: { // 星星最大个数
				type: [String, Number],
				default: 5,
			},
			starDefault: { //未选中
				type: String,
				default: require('@/static/img/st_star.png'),
			},
			starActive: {
				type: String,
				default: require('@/static/img/st_star_active.png'),
			},
			score: { //默认分数
				type: [Number, String],
				default: 0
			},
			starsDisabled: { //是否禁用star
				type: [Boolean],
				default: false
			},

			textareaShow: { // 多行文本显示
				type: [String, Boolean],
				default: true,
			},
			textareaPlaceholder: {
				type: [String],
				default: "此专家满足你的期待吗？说说你的心得，分享给想预约的他们吧"
			},

			submitShow: { // 发布按钮
				type: [String, Boolean],
				default: true,
			},
			submitText: {
				type: String,
				default: "提交",
			},

			infoReceive: { // 获取值
				type: Object,
				default: function() {
					return {
						score: 0,
						content: ""
					}
				}
			}
		},
		computed: {
			formatScore() {
				return this.iscore
			}
		},
		onLoad(e) {
			this.goodsId = e.goods_id;
			this.orderId = e.order_sn
			console.log(this.goodsId, this.orderId)

		},
		methods: {
			/**
			 * @name 设置分数
			 */
			setScore(score) {
				if (this.starsDisabled !== false) return
				this.infoReceive.score = score
				this.iscore = score
				switch (+this.iscore) {
					case 1:
						this.scoreText = '非常差';
						this.type = 3;
						break;
					case 2:
						this.scoreText = '差';
						this.type = 3;
						break;
					case 3:
						this.scoreText = '一般';
						this.type = 2;
						break;
					case 4:
						this.scoreText = '好';
						this.type = 1;
						break;
					case 5:
						this.scoreText = '非常好';
						this.type = 1;
						break;
				}
				this.$emit("scoreChange", score)
			},

			/**
			 * @name 获取textarea内容
			 */

			blur(e) {
				this.infoReceive.content = e.detail.value
			},

			/**
			 * @name 提交
			 */
			doSubmit() {
				this.infoReceive.goods_id = this.goodsId
				this.infoReceive.order_sn = this.orderId
				this.infoReceive.type = this.type
				this.infoReceive.thumb = this.upload_cache_list
				this.infoReceive.access_token = uni.getStorageSync("access_token")
				console.log(this.infoReceive)
				uni.request({
					url: this.websiteUrl() + 'Evaluate/add',
					data: this.infoReceive,
					header: {
						'content-type': 'application/json'
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/user/order/index?status=4'
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: 'none'
							});
						}
					}
				});
			}
		},
		created() {
			this.infoReceive.score = this.score
		}
	}
</script>
<style lang='scss'>
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;
	$fontSize:28upx;

	page {
		background: #F9F9F9;
	}

	.content {
		height: 100%;
	}

	.issue-head-text {
		line-height: 100rpx;
		font-size: 26rpx;
		color: #898989;
		vertical-align: middle;
		margin-left: 35rpx;
	}

	.issue {
		background-color: $backgroundC;

		&-head {
			background-color: $white;
			height: 100upx;
			border-top: 1upx solid $borderColor;
			border-bottom: 1upx solid $borderColor;
			padding: 0 25upx;

			&-pic {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 17upx;
			}

			&-title {
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}

			&-star-box {
				display: inline-block;

				image {
					width: 32upx;
					height: 32upx;
					vertical-align: middle;
					margin-right: 14upx;
				}

				image.active {
					animation: star_move ease-in 1 1s, star_rotate ease 1.5s infinite 1s;
				}
			}
		}

		textarea {
			width: 100%;
			height: 420upx;
			background-color: $white;
			font-size: $fontSize;
			color: #898989;
			padding: 24upx;
			box-sizing: border-box;
			line-height: 40upx
		}

		&-btn-box {
			padding: 54upx 30upx;

			button {
				width: 100%;
				height: 80upx;
				border-radius: 80upx;
				font-size: $fontSize;
				background: linear-gradient(90deg, #4D7CF4, #88AEFF);
				line-height: 80upx
			}
		}
	}

	@keyframes star_move {
		from {
			width: 50upx;
			height: 50upx;
			transform: rotate(180deg)
		}

		to {
			width: 32upx;
			height: 32upx;
			transform: rotate(0)
		}
	}

	@keyframes star_rotate {
		0% {
			transform: rotateY(360deg)
		}

		100% {
			transform: rotateY(180deg)
		}

	}

	.sunui-uploader-files {
		padding: 0 24rpx;
	}
</style>
